<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天室</title>
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
    <p>当前账号:</p>

    <div id="chat" style="width: 300px;height: 300px;border: 1px solid rebeccapurple">
        <!--聊天窗口-->
    </div>
    <input type="text" name="content" id="content">
    <input type="button" value="发送" id="btn">

    <script>
        if("WebSocket" in window){
            alert("您的浏览器支持websocket")
            var ws = new WebSocket('ws://127.0.0.1:8081/chat/')
            //用户发送信息先发给服务器
            //服务器推给每个客户端

            ws.onmessage = function (evt) {
                console.log(evt.data)
                $('#chat').append('<br>')
                $('#chat').append(evt.data)
            }

            $('#btn').click(function () {
                var content = $('#content').val() //获取用户输入的内容
                ws.send(content)
            })

        }else{
            alert("您的浏览器不支持websocket")
        }
    </script>
</body>
</html>